<template>
  <div>
    <ul class="tea" v-if="this.orderList.length > 0 ? true : false">
      <li class="order" v-for="(item, index) in orderList" :key="index" @click="orderDetail(item)">
        <van-swipe-cell>
          <div class="order-top">
            <div class="dot">外卖</div>
            <div class="address">茶百道万达金街店</div>
            <div class="status">
              {{ item.orderStatus === 1 ? "已完成" : "待取餐"
              }}<span class="iconfont icon-youjiantou"></span>
            </div>
          </div>
          <div class="time">{{ item.orderCode }}</div>
          <div class="goods">
            <div class="goods-list">
              <div
                class="goods-img"
                v-for="(item2, index2) in item.goodsInfo"
                :key="index2"
              >
                <img :src="item2.goods_img" />
              </div>
            </div>
            <div class="goods-money">
              <div class="money">
                ¥<span>{{ item.total }}</span>
              </div>
              <div class="num">共{{ item.num }}件</div>
            </div>
          </div>
          <div class="order-bottom">
            <div class="btn" @click.stop="goBuy">再来一单</div>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="delOrder(item.id)"
            />
          </template>
        </van-swipe-cell>
      </li>
    </ul>
    <van-empty
      v-else
      class="custom-image"
      image-size="150px"
      image="./images/NoOder.png"
      description="您还没有订单信息哦~"
    />
  </div>
</template>

<script>
import { reqGetAllOrder, reqDelOrder } from "@/api";
import { Toast } from "vant";
export default {
  data() {
    return {
      orderList: [],
    };
  },
  mounted() {
    this.getAllOrder();
  },
  methods: {
    goBuy() {
      this.$router.push("/buy");
    },
    async getAllOrder() {
      let user_id = this.$store.state.login.userInfo.id;
      let res = await reqGetAllOrder({ user_id });
      if (res.status === 200) {
        res.data.forEach((item) => {
          let goodsInfo = JSON.parse(item.goods_info);
          let num = 0;
          goodsInfo.forEach((i) => {
            num += Number(i.goods_num);
          });
          let obj = {
            id: item.id,
            goodsInfo,
            orderCode: item.order_code,
            total: item.total,
            orderStatus: item.order_status,
            num,
          };
          this.orderList.push(obj);
        });
      }
    },
    async delOrder(id) {
      let res = await reqDelOrder({ id });
      if (res.status === 200) {
        this.$router.go(0);
        Toast("已删除");
      } else {
        Toast("删除失败");
      }
    },
    orderDetail(orderItem) {
      this.$router.push({
        name: 'orderdetail',
        params: {
          orderItem
        }
      });
    }
  },
};
</script>

<style>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}

.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>

<style lang="less" scoped>
.tea {
  padding: 15px;
  margin-bottom: 50px;

  .order {
    border-radius: 15px;
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 15px;

    .order-top {
      display: flex;
      align-items: center;

      .dot {
        width: 40px;
        height: 20px;
        background-color: #0151c6;
        font-size: 13px;
        color: #fff;
        text-align: center;
        line-height: 20px;
        border-radius: 15px 15px 0 15px;
      }

      .address {
        flex: 1;
        font-size: 18px;
        font-weight: 500;
        margin-left: 10px;
      }

      .status {
        font-size: 15px;
        align-self: flex-end;
        padding-right: 10px;
        display: flex;
        align-items: center;
      }
    }

    .time {
      margin: 10px 0 20px;
      color: #646566;
      font-size: 15px;
    }

    .goods {
      height: 75px;
      border-bottom: 1px dashed #eeecec;
      padding-right: 10px;
      //   box-sizing: border-box;
      display: flex;
      padding-bottom: 15px;

      .goods-list {
        flex: 1;
        display: flex;
        align-items: center;
        overflow-x: auto;
        .goods-img {
          width: 50px;
          height: 60px;
          margin-right: 15px;
          flex-shrink: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .goods-money {
        margin-left: 10px;
        padding: 10px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .money {
          font-size: 18px;
          font-weight: 600;
          span {
            margin-left: 3px;
          }
        }
        .num {
          font-size: 14px;
          color: #646566;
        }
      }
    }

    .order-bottom {
      padding: 10px 0 0 0;
      display: flex;
      justify-content: end;
      padding-right: 10px;

      .btn {
        width: 100px;
        height: 30px;
        background-color: #0151c6;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1px 0;
        border-radius: 15px;
        font-size: 15px;
      }
    }
  }
}
</style>
